<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>

<!--[if IEMobile 7]><html class="no-js iem7 oldie"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html class="no-js ie7 oldie" lang="en"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html class="no-js ie8 oldie" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|(gt IEMobile 7)]><!--><html class="no-js" lang="en"><!--<![endif]-->

<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>文化创意产业项目虚拟仿真实验教学系统</title>
	<%@include file="/header.jsp" %>
	<script type="text/javascript" src="/js/init.js"></script>
	<script type="text/javascript">
		var id;
		var pid;
		var pageNumber;
	
		$(function() {
			activeMenu(3);
			
			containerResize();
			
			$(document).on('click', '#add-sibling-btn', function() {
				dictDialog(null, pid);
		    });
			$(document).on('click', '#add-son-btn', function() {
				dictDialog(null, id);
		    });
		})
		
		function containerResize() {
			var h = $("#right-container").height();
			$("#left-container").height(h);
		}
		
		function turnpage(pageNo) {
			pageNumber = pageNo;
			$("#dict-table").load("/dict/page?pageNo="+pageNo+"&pid="+(id==null?"":id));
		}
		
		function dictDialog(dictId,dictPid) {
			var title = dictId==null?"新增字典":"编辑字典";
			dictId = dictId==null?"":dictId;
			dictPid = dictPid==null?"":dictPid;
			var modal = $.modal({
				title: title,
				url: '/dict/load?id='+dictId+"&pid="+dictPid,
				width: 500,
				ajax: {
					success: function()
					{
						modal.centerModal();
					}
				},
				buttons: {
					'保存': {
						classes: 'small blue-gradient glossy center',
						click: function(win){
							$.ajax({
								url:"/dict/save",
								type:"post",
								data:$("#dict-form").serialize(),
								dataType:"json"
							}).done(function(data){
								myalert(data.msg);
								if(data.isSuccess) {
									win.closeModal();
									$("#dict-frame").attr("src", "/dict/tree");
									turnpage(pageNumber);
								}
							})
						}
					},
					'关闭': {
						classes: 'small blue-gradient glossy center',
						click: function(win) { win.closeModal(); }
					}
				}
			});
		}
		
		function deleteDict(id) {
			myconfirm("确认删除？", function() {
				$.ajax({
					url:"/dict/del/"+id,
					dataType:"json"
				}).done(function(data){
					myalert(data.msg);
					if(data.isSuccess) {
						$("#dict-frame").attr("src", "/dict/tree");
						turnpage(pageNumber);
					}
				})
			})
		}
		
	</script>
</head>

<body class="clearfix with-menu with-shortcuts">

	<!-- Prompt IE 6 users to install Chrome Frame -->
	<!--[if lt IE 7]><p class="message red-gradient simpler">Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

	<!-- Title bar -->
	<header role="banner" id="title-bar">
		<h2>文化创意产业项目虚拟仿真实验教学系统</h2>
	</header>

	<!-- Button to open/hide menu -->
	<a href="#" id="open-menu"><span>Menu</span></a>

	<!-- Button to open/hide shortcuts -->
	<a href="#" id="open-shortcuts"><span class="icon-thumbs"></span></a>

	<!-- Main content -->
	<section role="main" id="main">

		<noscript class="message black-gradient simpler">Your browser does not support JavaScript! Some features won't work as expected...</noscript>
		<hgroup id="main-title" class="thin">
			<h1>字典管理</h1>
		</hgroup>

		<div class="with-padding">
			<div class="columns">
			<div class="new-row-mobile three-columns three-columns-tablet nine-columns-mobile">
	
				<div class="block large-margin-bottom" id="left-container">
					<div class="block-title" id="title">
						<h3>字典树</h3>
					</div>
					
		
					<iframe id="dict-frame" src="/dict/tree" width=100% height=100%></iframe>
				</div>
			</div>
			
			<div class="new-row-mobile nine-columns nine-columns-tablet fifteen-columns-mobile">
	
				<div class="block large-margin-bottom" id="right-container">
					<div class="block-title">
						<h3>字典列表</h3>
					</div>
					<div id="dict-table">
						<jsp:include page="dict_table.jsp"/>
					</div>
				</div>
			</div>
			</div>
			
		</div>
		
		
	</section>
	<!-- End main content -->

	<script>

		// Call template init (optional, but faster if called manually)
		$.template.init();
		
	</script>
</body>
</html>